<template>
  <el-container class="dashboard">
    <el-header>
      <div class="header-content">
        <div style="position: absolute">
          <el-button type="primary" @click="setCurrentPeriod('year')">当年</el-button>
          <el-button type="primary" @click="setCurrentPeriod('month')">当月</el-button>
          <el-button type="primary" @click="setCurrentPeriod('now')">当日</el-button>
        </div>
        <div class="centered-title">
          <span>龙江阜丰无人值守地磅系统</span>
        </div>
      </div>
    </el-header>
    <el-main class="content">
      <div class="left-container">
        <div v-loading="loading" class="chart-container" ref="pieChart"></div>
        <div v-loading="loading" class="chart-container" ref="barChart"></div>
        <div v-loading="loading" class="chart-container" ref="barChart2"></div>
      </div>
      <div class="center-content">
        <div v-loading="loading" class="top-content">
          <p class="content-item">
            <span class="label">在厂车辆数量:</span>
            <span class="value">{{ resultData.count }}</span>
            <span class="label">正在过磅数量(吨):</span>
            <span class="value">{{ resultData.zbang }}</span>
          </p>
          <p class="content-item">
            <span class="label">进厂过磅数量(吨):</span>
            <span class="value">{{ resultData.jbang }}</span>
            <span class="label">出厂过磅数量(吨):</span>
            <span class="value">{{ resultData.cbang }}</span>
          </p>
        </div>
        <div class="block">
          <el-carousel height="300px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img :src="image" alt="轮播图" style="width: 100%; height: 100%; object-fit: cover;">
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="table-container"  style="overflow-y: auto; height: 100%; background:rgba(0,0,0,0.1)">
          <span id="table-title" >进出厂数据</span>
          <el-table v-loading="loading"
                    :data="tableData" height="90%"
                    class="small-font transparent-table" style="margin-top: 2px; background:rgba(0,0,0,0.1)">
            <el-table-column prop="wlmc" label="产品名称" width="100%"></el-table-column>
            <el-table-column prop="chehao" label="车牌号" width="100%"></el-table-column>
            <el-table-column prop="ckmc" label="仓库名称" width="100%"></el-table-column>
            <el-table-column prop="dbh" label="进厂磅" width="85%"></el-table-column>
            <el-table-column prop="dbh2" label="出厂磅" width="85%"></el-table-column>
            <el-table-column prop="pzsj" label="日期" width="100%"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right-content">
        <div v-loading="loading" class="chart-container" ref="pieChartR"></div>
        <div v-loading="loading" class="chart-container" ref="barChartR"></div>
        <div v-loading="loading" class="chart-container" ref="barChart2R"></div>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import { getdata, getdata1, getdata2, getresultData ,fetchTableData,getdataR,getdata1R, getdata2R} from "@/api/system/index";

import * as echarts from 'echarts';


export default {
  data() {
    return {
      pieData: [],
      pieDataR: [],
      barData1: [],
      barData2: [],
      barData1R: [],
      barData2R: [],
      resultData: {
        count: '',
        zbang: '',
        cbang: '',
        jbang: '',
      },
      period: 'now',
      images: [
        require('./lj1.jpg'),
        require('./bg2.jpg'),
        require('./bg1.jpg'),
        require('./bg3.jpg'),
      ],
      tableData: [],
      loading: false,
    };
  },
  mounted() {
    this.fetchData();
    this.fetchData1();
    this.fetchData2();

    this.getresultData();
    this.fetchTableData();

    this.fetchDataR();
    this.fetchData1R();
    this.fetchData2R();
  },
  methods: {
    fetchData() {
      const params = {
        period: this.period
      };
      getdata(params).then(response => {
        this.pieData = response.data;
        this.initPieChart();

      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    fetchDataR() {
      const params = {
        period: this.period
      };
      getdataR(params).then(response => {
        console.log(response);
        this.pieDataR = response.data;
        this.initPieChartR();
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    fetchData1() {
      const params = {
        period: this.period
      };
      getdata1(params).then(response => {
        this.barData1 = response.data;
        this.initBarChart();
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    fetchData2() {
      const params = {
        period: this.period
      };
      getdata2(params).then(response => {
        this.barData2 = response.data;
        this.initBarChart2();
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    fetchData1R() {
      const params = {
        period: this.period
      };
      getdata1R(params).then(response => {
        this.barData1R = response.data;
        this.initBarChartR();
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    fetchData2R() {
      const params = {
        period: this.period
      };
      getdata2R(params).then(response => {
        this.barData2R = response.data;
        this.initBarChart2R();
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    getresultData() {
      this.loading = true;
      const params = {
        period: this.period
      };
      getresultData(params).then(response => {
        this.resultData = response.data;
        this.loading = false;
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    setCurrentPeriod(period) {
      this.period = period;
      this.fetchData();
      this.fetchData1();
      this.fetchData2();
      this.fetchDataR();
      this.fetchData1R();
      this.fetchData2R();
      this.getresultData();
    },
    fetchTableData() {
      const params = {
        period: this.period
      };
      fetchTableData(params).then(response => {

        this.tableData  = response.data;
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    initPieChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '进场过磅比例图',
          left: 'center',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'item',
          position: function (point, params, dom, rect, size) {
            return [point[0] + 10, point[1] - 20];
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '30px',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '70%',
            center: ['70%', '50%'],
            data: this.pieData.map(item => ({ value: item.value, name: item.name })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              show: false,
              position: 'outside',
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initPieChartR() {
      const chartDom = this.$refs.pieChartR;
      const myChart = echarts.init(chartDom);
      const colorList = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FF8C33'];
      const option = {
        title: {
          text: '出厂过磅比例图',
          left: 'center',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'item',
          position: function (point, params, dom, rect, size) {
            return [point[0] + 10, point[1] - 20];
          }
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: '30px',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '70%',
            center: ['18%', '50%'],
            data: this.pieDataR.map((item, index) => ({
              value: item.value,
              name: item.name,
              itemStyle: {
                color: colorList[index % colorList.length] // 根据索引选择颜色
              }
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              show: false,
              position: 'outside',
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    initBarChartR() {
      const chartDom = this.$refs.barChartR;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '主产品出厂过磅数量图(吨)',
          left: 'left',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.barData1R.map(item => item.name),
          axisLabel: {
            rotate: 30,
            color: 'white',
            fontSize: 10,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white',
            formatter: function(value) {
              return value / 1000 + 'K'; // 格式化为以K为单位
            }
          },
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: this.barData1R.map(item => item.value),
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: (params) => {
                const colorList = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FF8C33'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    },
    initBarChart2R() {
      const chartDom = this.$refs.barChart2R;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '出厂其他产品明细(吨)',
          left: 'left',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.barData2R.map(item => item.name),
          axisLabel: {
            rotate: 30,
            color: 'white',
            fontSize: 10,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white',
            formatter: function(value) {
              return value / 1000 + 'K';
            }
          },
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: this.barData2R.map(item => item.value),
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: (params) => {
                const colorList = ['#FF33A1', '#3357FF', '#33FF57', '#FF8C33', '#FF1135'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    },
    initBarChart() {
      const chartDom = this.$refs.barChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '主产品进场过磅数量图(吨)',
          left: 'left',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.barData1.map(item => item.name),
          axisLabel: {
            rotate: 45,
            color: 'white',
            fontSize: 10,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white',
            formatter: function(value) {
              return value / 1000 + 'K'; // 格式化为以K为单位
            }
          },
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: this.barData1.map(item => item.value),
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: (params) => {
                const colorList = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FF8C33'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    },
    initBarChart2() {
      const chartDom = this.$refs.barChart2;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '进厂其他产品明细(吨)',
          left: 'left',
          textStyle: {
            color: 'white',
            fontSize: 16,
          }
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.barData2.map(item => item.name),
          axisLabel: {
            rotate: 30,
            color: 'white',
            fontSize: 10,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white',
            formatter: function(value) {
              return value / 1000 + 'K'; // 格式化为以K为单位
            }
          },
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: this.barData2.map(item => item.value),
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: (params) => {
                const colorList = ['yellow', '#3357FF', '#33FF57', '#FF8C33', '#F121B2'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.small-font .cell {
  font-size: 12px; /* 调整为你想要的字体大小 */
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  color: white; /* 设置全局字体颜色为白色 */
}

.dashboard {
  height: 100vh;
  width: 100%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-image: url('./bg3.jpg');
  background-size: cover;
  background-position: center;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 15px;

}

.centered-title {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;

}

.el-button {
  color: white;
  margin-left: 10px;
}

.content {
  flex: 1;
  display: flex;
}

.left-container {
  display: flex;

  flex-direction: column; /* 竖直排列 */
  width: 30%; /* 设置左侧容器的宽度 */
}

.center-content{
  display: flex;

  flex-direction: column; /* 竖直排列 */
  width: 40%; /* 设置左侧容器的宽度 */
}



.top-content {
  padding: 20px; /* 添加内边距 */
  border-radius: 8px; /* 添加圆角 */
  font-size: 14px; /* 调整字体大小 */

}

.content-item {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 内容在两端对齐 */
  margin-bottom: 10px; /* 每个项目之间的间距 */
}

.label {
  font-weight: bold; /* 加粗标签文字 */
  margin-right: 10px; /* 添加标签和数值之间的间距 */
}
.value {
  font-size: 14px; /* 调整数据的字体大小 */
  color: #00afff;
}

.right-content {
  display: flex;

  flex-direction: column; /* 竖直排列 */
  width: 30%; /* 设置左侧容器的宽度 */
}

.chart-container {
  width: 105%;
  height: 120%; /* 设置图表的高度为 200px */
  margin: 10px 10px;

}

.el-dropdown {
  vertical-align: top;
}
.el-icon-arrow-down {
  font-size: 12px;
}
#table-title {
  font-size: 16px;
  font-weight: bold;
}
</style>
